<template>
    <el-table :data="data" size="small" class="el-table" :height="420">
        <el-table-column class-name="color0" prop="name" label="账号名" width="100">
            <template #default="scope">
                <a v-if="chat !== 'hlg'" :href="`/#/user?userid=${scope.row.ID}`" class="href" target="_blank">{{
        scope.row.name
    }}</a>
                <span v-else>{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="teamname" label="所在团队">
            <template #default="scope">
                <span class="span">
                    {{ sample(usergroup) }}
                </span>
            </template>
        </el-table-column>
        <el-table-column class-name="text-center color2 fw-bold" prop="count" label="练习量" width="70">
            <template #default="scope">
                <MynumberVue :num="Number(scope.row.count)"></MynumberVue>
            </template>
        </el-table-column>

        <el-table-column class-name="color1 text-center fw-bold" prop="videocount" label="视频学习量" width="100">
            <template #default="scope">
                <MynumberVue :num="Number(scope.row.videocount)"></MynumberVue>
            </template>
        </el-table-column>
        <el-table-column prop="count" label="练习正确率" width="160">
            <template #default="scope">
                <el-progress class="el-progress" :stroke-width="8" :percentage="Number(scope.row.Accuracy)" />
            </template>
        </el-table-column>
    </el-table>

</template>

<script lang="ts" setup>
import MynumberVue from "../../../components/animejs/mynumber.vue";
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { sample } from 'underscore'
defineProps<{ data: Studycodemodel.Iuser[], centerref: any, chat: string }>()
const usergroup = ['北京钱学森中学初2024级',

  '北京钱学森中学小学组（本校区）',

  '北京钱学森中学高2024级',

  '北京钱学森中学初2023级',

  '北京钱学森中学初2022级']
</script>

<style scoped>
.el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.0);
    --el-table-text-color: #fff;
    --el-table-header-text-color: #fff;
    --el-table-header-bg-color: var(--el-table-bg-color);
    --el-table-tr-bg-color: var(--el-table-bg-color);
    --el-table-row-hover-bg-color: var(--el-table-bg-color);
    --el-table-border: none;
    --el-table-border-color: var(--el-table-bg-color);
}

.el-progress {
    margin-top: 4.5px;
    --el-border-color-lighter: rgba(255, 255, 255, 0.5);
}



.span {
    cursor: pointer;

}

.span:hover {
    font-weight: 700;
}
</style>
<style>
.el-progress-bar__inner {
    background: linear-gradient(315deg, #0670F8 0%, #34C7FC 100%);
}
</style>
